<template>
    <div>
        <h1>Icon 图标</h1>
        <Anchor title="概述" h2></Anchor>
        <p>iView 的图标使用开源项目<a href="http://ionicons.com/" target="_blank">
            <!--<Icon type="ios-ionic"></Icon>-->
            ionicons</a></p>
        <Anchor title="如何使用" h2></Anchor>
        <div class="api">
            <Anchor title="API" h2></Anchor>
            <Anchor title="Icon props" h3></Anchor>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>type</td>
                    <td>图标的名称</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>图标的大小，单位是 px</td>
                    <td>Number | String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>color</td>
                    <td>图标的颜色</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--<p>使用<code>&lt;Icon /></code>组件，指定图标对应的<code>type</code>属性，示例代码：</p>-->
        <!--<i-code lang="html" bg>{{ code.demo }}</i-code>-->
        <!--<p>渲染后为：</p>-->
        <!--<i-code lang="html" bg>{{ code.render }}</i-code>-->
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';

	export default {
		name: 'Icon',
		components: {
			Anchor,
			Demo,
		},
		mounted() {

		},
		data() {
			return {}
		}
	}
</script>
<style scoped>

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    div {
        position: relative;
        font-size: 14px;
    }

    .icons {
        overflow: hidden;
        zoom: 1;
    }

    .icons-item {
        float: left;
        margin: 6px 6px 6px 0;
        width: 145px;
        text-align: center;
        list-style: none;
        cursor: pointer;
        height: 100px;
        color: #5C6B77;
        transition: all 0.2s ease;
        position: relative;
        padding-top: 10px;
    }

    .icons-item p {
        padding-top: 15px;
    }

    .icon-search {
        position: relative;
        margin: 20px auto 30px;
        text-align: center;
    }

    .icon-search input {
        width: 500px;
        box-sizing: border-box;
        border: 0;
        border-radius: 4px;
        background: #f5f5f5;
        text-align: center;
        font-size: 14px;
        outline: none;
        margin: 0 auto;
        padding: 8px 0;
    }

    .icon-search p {
        margin-top: 20px;
    }

    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
